<style>
table.lo * { font-size: 12px; font-family: Trebuchet MS; }
table.lo { width: 100%; }
table.lo td { vertical-align: top; text-align: left; }
table.lo td.left { width: 500px; }
table.lo td.right { width: 500px; }
.pure_form_extra label, .pure_form_extra input { font-size: 12px !important; }
.pure_form_extra label * { font-size: 12px !important; }
.pure_form_extra .mandatory { color: #ff0000; padding-left: 5px; }
.pure_form_extra { width: 100%; }

</style>

<?php 
$id = Utils::get_param('id', 0);
$opts = new stdClass();
$opts->cd = 't.id = :v1';
$opts->cdv = array(':v1' => $id);
$data = $orm->get('pb_colg_agent', NULL, NULL, NULL, NULL, $opts)->d;

$pg = Utils::get_param('pg', 1);
$objs = $orm->get('pb_colg_agent', 't.company', 'ASC', $pg, SIZE, NULL);

$users = $orm->get('pb_colg_user', 't.first_name', 'ASC', NULL, NULL, NULL)->d;
$countries = $orm->get('pb_country', 't.name', 'ASC', NULL, NULL, NULL)->d;
?>

<table class="lo" cellPadding="0" cellSpacing="0">
  <tr>
    <td class="left">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Contact Info</legend>
        
        <div class="pure-control-group">
          <label>Company</label>
          <input id="company" type="text" class="pure-input-1-2" placeholder="{Company}" />
        </div>
        
        <div class="pure-control-group">
          <label>Marketing</label>
          <span id="marketing"></span>
        </div>
        
        <div class="pure-control-group">
          <label>First Name</label>
          <input id="first_name" type="text" class="pure-input-1-2" placeholder="{First Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Last Name</label>
          <input id="last_name" type="text" class="pure-input-1-2" placeholder="{Last Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Address</label>
          <textarea id="address" style="resize: none;" class="pure-input-1-2" placeholder="{Address}"></textarea>
        </div>
        
        <div class="pure-control-group">
          <label>Postal Address</label>
          <textarea id="postal_address" style="resize: none;" class="pure-input-1-2" placeholder="{Postal Address}"></textarea>
        </div>
        
        <div class="pure-control-group">
          <label>Phone</label>
          <input id="phone" type="text" class="pure-input-1-2" placeholder="{Phone}" />
        </div>
        
        <div class="pure-control-group">
          <label>Mobile</label>
          <input id="mobile" type="text" class="pure-input-1-2" placeholder="{Mobile}" />
        </div>
        
        <div class="pure-control-group">
          <label>Fax</label>
          <input id="fax" type="text" class="pure-input-1-2" placeholder="{Fax}" />
        </div>
        
        <div class="pure-control-group">
          <label>Email</label>
          <input id="email" type="text" class="pure-input-1-2" placeholder="{Email}" />
        </div>
        
        <div class="pure-control-group">
          <label>Country</label>
          <select id="country" class="pure-input-1-2">
            <option value=""></option>
          </select>
        </div>
        
        <div class="pure-control-group">
          <label>Comment</label>
          <textarea id="comment" style="resize: none;" class="pure-input-1-2" placeholder="{Comment}"></textarea>
        </div>
        
        <div class="pure-control-group">
          <label>&nbsp;</label>
          <button class="pure-button pure-input-1-2 pure-button-primary" onclick="submit_obj();">Save</button>
        </div>
        
        <div class="pure-control-group expg">
          <label>&nbsp;</label>
          <button class="pure-button" onclick="delete_obj();">Delete</button>
          <button class="pure-button" onclick="__data = []; reset(); render();">New Agent</button>
        </div>
      </div>
    </td>
    <td class="right">
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Bank Info</legend>
      
        <div class="pure-control-group">
          <label>Account Name</label>
          <input id="bank_account_name" type="text" class="pure-input-1-2" placeholder="{Account Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Account No.</label>
          <input id="bank_account_no" type="text" class="pure-input-1-2" placeholder="{Account No.}" />
        </div>
        
        <div class="pure-control-group">
          <label>Bank Name</label>
          <input id="bank_name" type="text" class="pure-input-1-2" placeholder="{Bank Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Branch Name</label>
          <input id="bank_branch_name" type="text" class="pure-input-1-2" placeholder="{Branch Name}" />
        </div>
        
        <div class="pure-control-group">
          <label>Branch Address</label>
          <input id="bank_branch_address" type="text" class="pure-input-1-2" placeholder="{Branch Address}" />
        </div>
        
      </div>
      <div>&nbsp;</div>
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Agent Type</legend>
        
        <div class="pure-control-group">
          <label><input id="at_gst" name="agent_type" type="radio" /></label>
          <span style="width: 85px; display: inline-block;">GST</span>
          <input id="agent_gst_no" type="text" placeholder="{GST No.}" />
        </div>
        
        <div class="pure-control-group">
          <label><input id="at_ird" name="agent_type" type="radio" /></label>
          <span style="width: 85px; display: inline-block;">IRD</span>
          <input id="agent_ird_no" type="text" placeholder="{IRD No.}" />
        </div>
        
        <div class="pure-control-group">
          <label><input id="at_oversea" name="agent_type" type="radio" /></label>
          Oversea
        </div>
      </div>
      <div>&nbsp;</div>
      <div class="pure-form pure-form-aligned pure_form_extra">
        <legend>Commission Type</legend>
      
        <div class="pure-control-group">
          <label><input id="ct_percentage" name="commission_type" type="radio" /></label>
          <span style="width: 85px; display: inline-block;">Percentage</span>
          <input id="commission_percentage" type="text" placeholder="{Percentage}" />
        </div>
        
        <div class="pure-control-group">
          <label><input id="ct_fixedrate" name="commission_type" type="radio" /></label>
          <span style="width: 85px; display: inline-block;">Fixed Rate</span>
          <input id="commission_fixedrate" type="text" placeholder="{Fixed Rate}" />
        </div>
      </div>
    </td>
  </tr>
</table>

<script type="text/javascript">
  /*<![CDATA[*/
  var __users = JSON.parse('<?php echo addslashes(json_encode($users)); ?>');
  var __countries = JSON.parse('<?php echo addslashes(json_encode($countries)); ?>');
  var __objs = JSON.parse('<?php echo addslashes(json_encode($objs)); ?>');
  var __data = JSON.parse('<?php echo addslashes(json_encode($data)); ?>');
  var __dir = '<?php echo PLGN_DIR . basename(dirname(__FILE__)); ?>';
  var __requrl = '<?php echo Utils::get_requrl($app_data); ?>';
  var __file = '<?php echo addslashes($app_data->param_file); ?>';
  var __redmd = '<?php echo addslashes($app_data->sys->redmd); ?>';
  var __sys = '<?php echo addslashes($app_data->sys->php_name); ?>';
  var __id = '<?php echo $app_data->param_id; ?>';
  var __session_id = '<?php echo session_id(); ?>';
  var __tmp = null;
  
  $(function() {
    reset();
    
    for (var idx in __countries) {
      var obj = __countries[idx];
      $('#country').append('<option value="' + obj.name + '">' + obj.name + '</option>');
    }
    $('#country').chosen({
      allow_single_deselect: true
    });
    
    render();
  });
  
  function reset() {
    if (__data.length == 0) {
      __data[0] = {
        id: 0,
        agent: '',
        first_name: '',
        last_name: '',
        company: '',
        address: '',
        postal_address: '',
        phone: '',
        mobile: '',
        email: '',
        fax: '',
        country: '',
        user_id: 0,
        comment: '',
        bank_account_name: '',
        bank_account_no: '',
        bank_name: '',
        bank_branch_name: '',
        bank_branch_address: '',
        agent_type: 0,
        agent_gst_no: '',
        agent_ird_no: '',
        commission_type: 0,
        commission_percentage: 0,
        commission_fixedrate: 0
      };
    }
  };

  function render() {
    if (__data[0].id != 0) {
      $('.expg').show();
    } else {
      $('.expg').hide();
    }
    Utils.leftbar(
      __objs,
      __data[0].id,
      'Agents',
      'company',
      function(page) {
        Url.redirect(__redmd, __sys + '.php?i=' + __id + '&__file=' + __file + '&id=' + __data[0].id + '&pg=' + page);
      }
    );
    render_data();
  };
  
  function render_data() {
    Url.insert_param('id', __data[0].id);

    $('#agent').val(__data[0].agent);
    $('#first_name').val(__data[0].first_name);
    $('#last_name').val(__data[0].last_name);
    $('#company').val(__data[0].company);
    $('#address').val(__data[0].address);
    $('#postal_address').val(__data[0].postal_address);
    $('#phone').val(__data[0].phone);
    $('#mobile').val(__data[0].mobile);
    $('#fax').val(__data[0].fax);
    $('#email').val(__data[0].email);
    $('#country').val(__data[0].country);
    $('#marketing').val(__data[0].user_id);
    $('#comment').val(__data[0].comment);
    $('#bank_account_name').val(__data[0].bank_account_name);
    $('#bank_account_no').val(__data[0].bank_account_no);
    $('#bank_name').val(__data[0].bank_name);
    $('#bank_branch_name').val(__data[0].bank_branch_name);
    $('#bank_branch_address').val(__data[0].bank_branch_address);
    $('#agent_gst_no').val(__data[0].agent_gst_no);
    $('#agent_ird_no').val(__data[0].agent_ird_no);
    $('#commission_percentage').val(__data[0].commission_percentage);
    $('#commission_fixedrate').val(__data[0].commission_fixedrate);

    $("#country").trigger("chosen:updated");

    $('#marketing').empty();
    $('#marketing').html('<select multiple></select>');
    for (var idx in __users) {
      var itm = __users[idx];
      $('#marketing select').append('<option' + ((__data[0].user_id.indexOf(',' + itm.id + ',') != -1) ? ' selected="selected"' : '') +  ' value="' + itm.id + '">' + itm.first_name + ' ' + itm.last_name + '</option>');
    }
    $('#marketing select').chosen();
    
    if (__data[0].agent_type == 0) {
      $('#at_gst')[0].checked = true;
    } else if (__data[0].agent_type == 1) {
      $('#at_ird')[0].checked = true;
    } else if (__data[0].agent_type == 2) {
      $('#at_oversea')[0].checked = true;
    }

    if (__data[0].commission_type == 0) {
      $('#ct_percentage')[0].checked = true;
    } else if (__data[0].commission_type == 1) {
      $('#ct_fixedrate')[0].checked = true;
    }
  };

  function submit_obj() {
    req = __data[0];
    req.agent = $('#agent').val();
    req.first_name = $('#first_name').val();
    req.last_name = $('#last_name').val();
    req.company = $('#company').val();
    req.address = $('#address').val();
    req.postal_address = $('#postal_address').val();
    req.phone = $('#phone').val();
    req.mobile = $('#mobile').val();
    req.fax = $('#fax').val();
    req.email = $('#email').val();
    req.country = $('#country').val();
    req.comment = $('#comment').val();
    req.bank_account_name = $('#bank_account_name').val();
    req.bank_account_no = $('#bank_account_no').val();
    req.bank_name = $('#bank_name').val();
    req.bank_branch_name = $('#bank_branch_name').val();
    req.bank_branch_address = $('#bank_branch_address').val();
    req.agent_gst_no = $('#agent_gst_no').val();
    req.agent_ird_no = $('#agent_ird_no').val();
    req.commission_percentage = $('#commission_percentage').val();
    req.commission_fixedrate = $('#commission_fixedrate').val();

    var tmp = $('#marketing select').val();
    if (!tmp) {
      req.user_id = '';
    } else {
      req.user_id = ',' + tmp.join(',') + ',';
    }

    if ($('#at_gst')[0].checked == true) {
      __data[0].agent_type = 0;
    } else if ($('#at_ird')[0].checked == true) {
      __data[0].agent_type = 1;
    } else if ($('#at_oversea')[0].checked == true) {
      __data[0].agent_type = 2;
    }

    if ($('#ct_percentage')[0].checked == true) {
      __data[0].commission_type = 0;
    } else if ($('#ct_fixedrate')[0].checked == true) {
      __data[0].commission_type = 1;
    }
    
    req.__pg = __objs.p;
    
    Ajax.request(
      __requrl + 'submit_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        if (rslt.__objs) {
          __objs = rslt.__objs;
          delete rslt.__objs;
        }
        __data[0] = rslt;
        render();
      },
      null
    );
  };
  
  function delete_obj() {
    Ajax.request(
      __requrl.replace(__file, 'index') + 'delete_obj',
      'req=' + Utils.encodeURI(JSON.stringify(__data[0])),
      function(rslt) {
        Url.redirect(__redmd, __sys + '.php?i=' + __id);
      },
      { confirm: 1 }
    );
  };

  function get_obj(id) {
    var req = {
      id: id
    };
    Ajax.request(
      __requrl + 'get_obj',
      'req=' + Utils.encodeURI(JSON.stringify(req)),
      function(rslt) {
        __data = rslt;
        render();
      },
      null
    );
    return false;
  };
  /*]]>*/
</script>